<template>
  <div class="admin">
    <!-- 数据表格 -->
    <!-- data属性 决定了表格中的数据有多少行  -->
    <!-- table-column 组件的个数决定了表格有多少列 -->
    <el-table  class="table" :data="adminList" stripe >
      <el-table-column prop="" label="序号" width="180">
        <template #default="scope">
          <span> {{scope.$index+1}} </span>
        </template>
      </el-table-column>
      <el-table-column prop="adminname" label="账号" width="260" ></el-table-column>
      <el-table-column prop="link" label="权限" >
        <template #default="scope">
          <el-tag class="ml-2" type="success">{{scope.row.role==2?'超级管理员':'管理员'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="alt" label="操作" >
        <template #default="scope">
           <el-button type="primary" @click="handleEdit(scope.row)">Edit</el-button>
           <el-button type="danger" @click="handleDelete(scope.row.adminid)">添加管理员</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
var Form = ref({})
var adminList = ref([])
var handleDelete = (val:any)=>{}
var handleEdit = (val:any)=>{}


</script>
<style scoped lang="scss">
.admin {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  background-image: url(@/assets/u1.png);
}
.table{
  height: 500px;
  width: 1200px;
  background-color: #3f3e3e7c;
}
</style>
